<template>
    <FormItem :label="`${itemData.label}：`" :prop="itemData.name" :label-for="itemData.name">
        <div class="qw-form-txt" v-if="itemData.readonly">{{ formData[itemData.name] }}</div>
        <DatePicker
                v-else
                v-model="dateValue"
                @on-change="handleChange"
                :type="itemData.dateType"

                :disabled="itemData.disabled"
                :options="itemData.options?itemData.options:{}"
                placement="bottom-end"
                :format="itemData.format || (itemData.dateType ==='datetimerange' || itemData.dateType ==='datetime' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd')"
                :placeholder="itemData.placeholder"
                style="width: 100%"
        ></DatePicker>
    </FormItem>
</template>
<script>

    export default {
        props: {
            itemData: {
                type: Object
            },
            formData: {
                type: Object
            }
        },
        watch: {
            formData (val) {
                this.dateValue = val[this.itemData.name];
            },
            itemData (val) {
                this.dateValue = val[this.itemData.name];
            }
        },
        data () {
            return {
                dateValue: ''
            }
        },
        methods: {
            handleChange (time, type) {
                this.formData[this.itemData.name] = time;
                this.$emit('handleChangeFormData', this.formData);
            }
        }
    }
</script>
